<!--
 * @Author: your name
 * @Date: 2021-09-06 16:20:14
 * @LastEditTime: 2021-09-13 14:02:34
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \EJ-WEBUI\src\views\column\index.vue
-->
<template>
    <div class="column">
        <div class="btn">
            <el-button type="primary" size="small" @click="toAddHandler">添加</el-button>
            <el-dialog :title="title" :visible.sync="visible" @close="dialogCloseHandler">
            <el-form :model="dialogData" :rules="rules" ref="ruleForm">
                <el-form-item label="栏目名称" :label-width="formLabelWidth" prop="name">
                    <el-input v-model="dialogData.name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="序号" :label-width="formLabelWidth"  prop="num">
                    <el-input v-model="dialogData.num" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="图标" :label-width="formLabelWidth" prop="icon">
                    <el-upload
                        class="avatar-uploader"
                        action="http://81.69.24.232/pet/jz_upload.php"
                        :show-file-list="false"
                        :on-success="handleIconSuccess">
                        <img v-if="imageUrl" :src="imageUrl" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="visible = false">取 消</el-button>
                <el-button type="primary" @click="dialogSaveHandler">确 定</el-button>
            </div>
            </el-dialog>
        </div>
        <div class="content">
            <el-table :data="tableData.list" style="width: 100%">
                <el-table-column align="center" type="index" width="50" label="序号" ></el-table-column>
                <el-table-column align="center" prop="id" label="栏目编号"></el-table-column>
                <el-table-column prop="name" label="名称"></el-table-column>
                <el-table-column prop="icon" label="图标">
                    <template v-slot = "scope">
                        <el-popover placement="right" width="140" trigger="hover">
                            <img :src="scope.row.icon" width="100" alt="图标找不到了">
                            <img slot="reference"
                                :src="scope.row.icon" width="30">
                        </el-popover>
                    </template>
                </el-table-column>
                <el-table-column prop="num" label="排序号"></el-table-column>
                <el-table-column fixed="right" label="操作">
                    <template v-slot="scope">
                        <el-button type="text" size="small" @click="toEditHandler(scope.row)">编辑</el-button>
                        <el-button type="text" size="small" style="color: red" @click="toRemoveHandler(scope.row.id)">删除</el-button>
                    </template>        
                </el-table-column>
            </el-table>
            <el-pagination background layout="prev, pager, next,sizes,jumper" 
                            :total="tableData.total"
                            :current-page="params.page"
                            :page-size="params.pageSize"
                            @current-change="currentPageHandler"
                            @size-change="pageSizeHandler"
                            :page-sizes="[5,10,15]">
            </el-pagination>
        </div>
    </div>
</template>

<script>
import request from '@/utils/request'
import qs from 'qs'
import lodash from 'lodash'
export default {
    data() {
        return {
            tableData: {},
            params: {
                page: 1,
                pageSize: 5
            },
            dialogData: {},
            visible: false,
            formLabelWidth: '120px',
            title: '',
            imageUrl: {},
            rules: {
                name: [{required: true, message: '请输入栏目名称', trigger: 'blur'}]
            }
        }
    },
    methods: {
        async pageQueryCategory() {
            let res = await request.get('/productCategory/pageQuery',{params:this.params})
            this.tableData = res.data
        },
        currentPageHandler(page) {
            this.params.page = page;
            this.pageQueryCategory();
        },
        pageSizeHandler(pageSize) {
             this.params.pageSize = pageSize;
             this.pageQueryCategory();
        },
        toAddHandler() {
            this.dialogData = {};
            this.imageUrl = null;
            this.title = '添加栏目信息'
            this.visible = true
        },
        handleIconSuccess(res,file) {
            this.dialogData.icon = res;
            this.imageUrl = res
        },
        dialogSaveHandler() {
            this.$refs['ruleForm'].validate((valid) => {
                if (valid) {
                    request.post('/productCategory/saveOrUpdate',qs.stringify(this.dialogData)).then( res =>{
                    this.pageQueryCategory(); 
                    this.$message.success(res.message)
                    this.visible = false;
                   })
                } else {
                    return false;
                }
            });
        },
        dialogCloseHandler() {
            this.$refs['ruleForm'].resetFields();
        },
        toEditHandler(row) {
            this.dialogData = lodash.clone(row);
            this.imageUrl = row.icon;
            this.title = '编辑栏目信息';
            this.visible = true
        },
        toRemoveHandler(id) {
            this.$confirm('此操作将永久删除该栏目信息, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                request.get('/productCategory/deleteById',{params:{id:id}}).then( res=> {
                this.pageQueryCategory();
                this.$message.error(res.message)
            });
            })
        }
    },
    created() {
        this.pageQueryCategory()
    },
}
</script>

<style>
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>